<template>
    <div id="dictionary-type">
        <el-dialog
            :title="$t('bLSr24iJOvc4uYKdA7S')"
            v-model="isTypeDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="769px" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <el-card shadow="hover" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px;">
                <el-form ref="queryForm" :inline="true" label-width="auto">
                    <el-form-item :label="$t('7ZvTnS2dqOwPb9oiNigk2')">
                        <el-input v-model="searchOne" :placeholder="$t('jkzsXuIaUJkl1saaPh2')" />
                    </el-form-item>
                    <!-- <el-form-item label="唯一编码：">
                        <el-input placeholder="请输入唯一编码" clearable  />
                    </el-form-item> -->
                    <el-form-item >
                        <el-button @click="againClick" icon="ele-Refresh"> {{ $t('eE3IedvHkKmnppI9FzCa7') }} </el-button>
                        <el-button @click="queryClick" type="primary" icon="ele-Search"> {{ $t('5fM07d4lwWlNvcG51m0ao') }} </el-button>
                        <el-button v-if="$hasPer('type:add')" @click="nodeClick('')" type="primary" icon="ele-Plus"> {{ $t('byjccsglzWnFEuusQvL9Z') }} </el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="hover" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px;">
                <el-table
                    ref="multipleTableRef"
                    :data="list"
                    style="width: 100%"
                    v-loading="loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                >
                    <el-table-column type="index" :label="$t('mypbV2IeRm6WQyRbsoib')" width="55" align="center" :index="indexMethod" />
                    <el-table-column :label="$t('k13Xerfqe3L0kykP8mVxa')" width="150" align="center" prop="name" show-overflow-tooltip />
                    <el-table-column :label="$t('aMv9P2MdktAsbpA2Np237')" width="150" align="center" prop="code" show-overflow-tooltip />
                    <el-table-column :label="$t('zERsSqVGpP2oyjapNebe')" align="center" width="120">
                        <template #default="scope">
                            <span v-if="scope.row.status === 0">{{ $t('y0y37lTpiuga4b5SArHMl') }}</span>
                            <span v-else-if="scope.row.status === 1">{{ $t('o9cmX4BkPqoJ7hCdwVwz8') }}</span>
                            <span v-else>{{ $t('ko8YfTozEhXs5Fu8Vn9c') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('mt2eRiZlOYe9ToMNdhch')" align="center" prop="remark" width="120" />
                    <el-table-column :label="$t('zKDqLt0KBzwdoJgiQgoj')" align="center" width="200" >
                    <template #default="scope">
                        <el-button v-if="$hasPer('type:edit')" @click="nodeClick(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary"> {{ $t('pAtGxrCkRSpku0DwjGyEk') }} </el-button>
                        <el-popconfirm
                            confirm-button-text="确认"
                            cancel-button-text="取消"
                            icon="InfoFilled"
                            icon-color="#626AEF"
                            :title="$t('w0AiVwUcoxhuhSFhbuv6g')"
                            @confirm="deleteHandle(scope.row.id)"
                        >
                            <template #reference>
                                <el-button v-if="$hasPer('type:del')" class="icon-e" icon="ele-Delete" size="small" text type="danger"> {{ $t('ko8YfTozEhXs5Fu8Vn9c') }} </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
                </el-table>
                <el-pagination
                    v-model:currentPage="pageNo"
                    v-model:page-size="pageSize"
                    :total="totalRows"
                    :page-sizes="[10, 20, 50, 100]"
                    small
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                />
            </el-card>
            <template #footer>
                <el-button @click="cancelTypeClick">{{ $t('nQ6scnWfQ6inCYcsK0') }}</el-button>
            </template>
        </el-dialog>
        <AddEditDictionaryType
            :isUseDialog="isUseDialog"
            :repairInfo="repairInfo"
            @cancelUseClick="cancelUseClick"
            @controlUseClick="controlUseClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue'
import { FormInstance, FormRules , ElMessage, ElButton, ElCol, ElDatePicker, ElDialog, ElDivider, ElForm, ElFormItem, ElInput, ElOption, ElRadio, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus'
import { sysDictTypePage , sysDictTypeDelete } from '/@/api/manage/manage.ts'
import AddEditDictionaryType from './add-edit-dictionary-type.vue'
/*** 定义接口基础数据类型 */
interface formType {
    repeatDis: Boolean,
    ruleForm: ruleFormType,
    list: any[], // 数组
    pageNo: number, // 当前页
    pageIndex: number,
    pageSize: number, // 一页的数量
    totalRows: number, // 总条数
    totalPage: number, // 总页数
}
/*** form 表单数据类型 */
type ruleFormType = {}
export default defineComponent( {
    name: 'dictionary-type',
    components: {
        AddEditDictionaryType
    },
    props: {
        isTypeDialog:{
            type: Boolean,
            default: false,
        },
    },
    setup(props,ctx){
        const titleCon = ref()
        const ruleFormRef = ref()
        let pageNo:number = 1
        let pageSize:number = 10
        const searchOne = ref()
        const loading = ref(false)
        const repairInfo = ref()
        const isUseDialog = ref(false)

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            repeatDis: false,
            ruleForm: {} as ruleFormType,
            list: [], // 数组
            pageNo: 1, // 当前页
            pageIndex: 1,
            pageSize: 10, // 一页的数量
            totalRows: 0, // 总条数
            totalPage: 0, // 总页数
        })

        // 设置序列号
        const indexMethod = (index: number) => {
            if (state.pageNo > 1) {
                return index + 1 + (Number(state.pageNo) - 1) * Number(state.pageSize);
            } else {
                return index + 1;
            }
        }

        const handleSizeChange = (val:any) => {
            pageSize = val
            GetData(pageNo,val)
        } 

        const handleCurrentChange = (val:any) => {
            pageNo = val
            GetData(val,pageSize)
        }

        /*** againClick 重置按钮 */
        const againClick = () => {
            searchOne.value = ''
            GetData(pageNo,pageSize)
        }

        /*** queryClick 查询按钮 */
        const queryClick = () => {
            GetData(pageNo,pageSize)
        }

        const GetData = async (n:number,s:number) => {
            loading.value = true
            let param:any = {}
            param.pageNo = n
            param.pageSize = s
            if(searchOne.value){
                param.name = searchOne.value
            }
            let res = await sysDictTypePage(param)
            if(res.success){
                state.list = res.data.rows
                state.pageIndex = res.data.pageSize
                state.pageIndex = res.data.pageNo
                state.totalPage = res.data.totalPage
                state.totalRows = res.data.totalRows
                loading.value = false
            }
        }

        /*** 基础验证 rules */
        const rules = reactive < FormRules > ({
            /*** 放置验证 */
            // name: [
			// 	{ required: true, message: '请输入角色名', trigger: 'blur' },
			// ],
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ctx.emit('cancelTypeClick')
        }

        /*** cancelTypeClick 取消事件 */
        const cancelTypeClick = () => {
            ctx.emit('cancelTypeClick')
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            isUseDialog.value = false
        }

        /*** controlUseClick 提交事件 */
        const controlUseClick = (val:any) => {
            console.log(val,'val数据')
            if(val === 'success'){
                GetData(pageNo,pageSize)
            }
            isUseDialog.value = false
        }

        /*** 监听isTypeDialog的变化 */
        watch(() => props.isTypeDialog,(newVal) => {
            if(newVal){
                GetData(pageNo,pageSize)
            }
        })

        /*** isTypeDialog 响应弹窗的关闭  */
        const isTypeDialog = computed(() => {
            return props.isTypeDialog
        })

        /*** nodeClick 新增/编辑 */
        const nodeClick = (val:any) => {
            val !== '' ? repairInfo.value = JSON.stringify(toRaw(val)) : repairInfo.value = ''
            isUseDialog.value = true
        }

        /*** deleteHandle 删除数据事件 */
        const deleteHandle = async (val: String | Number) => {
            let param = {id : val}
            try {
                let res = await sysDictTypeDelete(param)
                if(res.success){
                    GetData(pageNo,pageSize)
                }
            } catch (err) { return }
        }

        return {
            handleClose,
            cancelTypeClick,
            ruleFormRef,
            titleCon,
            ...toRefs(state),
            isTypeDialog,
            rules,
            indexMethod,
            handleSizeChange,
            handleCurrentChange,
            nodeClick,
            deleteHandle,
            againClick,
            queryClick,
            searchOne,
            loading,
            repairInfo,
            isUseDialog,
            cancelUseClick,
            controlUseClick,
        }
    },
} )
</script>
<style scoped lang="scss">
</style>